<template>
    <div>
        <div class="admin_login">
            <div>
                <h1>登录</h1>
                <h4>七尾医疗服务后台管理系统</h4>
                <div class="login_form">
                    <el-form status-icon :rules="loginRules" ref="loginFormRef" label-width="60px" :model="userLogin">
                        <el-form-item label="账号" style="background-color: white;" prop="username">
                            <el-input style="" v-model="userLogin.username" placeholder="请输入您的账号" />
                        </el-form-item>
                        <el-form-item label="密码" style="background-color: white;" prop="password">
                            <el-input v-model="userLogin.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <div style="font-size:13px;margin-left:230px">忘记密码请联系管理员</div>
                        <el-form-item>
                            <!-- <div @click="submitForm"
                                style="width:100%;background-color:#ff9138;height:50px;line-height: 50px;margin-right:50px;">
                                登录</div> -->
                                <el-button :loading="loading" @click="submitForm" style="width:100%;background-color:#ff9138;height:50px;line-height: 50px;margin-right:50px;" 
                                >登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { h, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {doUserLogin} from '@/api/userApi'
import useUserStore from '@/store/user'
import { ElMessage } from 'element-plus'
import { Loading } from 'element-plus/es/components/loading/src/service'
import router from '@/router'
const loginFormRef = ref<FormInstance>()
const uesrStore= useUserStore()
const userLogin = reactive({
    username: 'aa',
    password: 'AA'
})
const validateUsername = (rule: any, value: string, callback: any) => {
    if (value.includes('z')) {
        callback(new Error('账号不合法'))
    } else {
        callback()
    }
}
const loginRules = reactive<FormRules<typeof userLogin>>({
    username: [
        { required: true, whitespace: true, message: '账号不能为空' },
        { validator: validateUsername }
    ],
    password: [
        { required: true, whitespace: true, message: '密码不能为空' }
    ]
})
const loading =ref(false)
const submitForm = () => {
    if (!loginFormRef.value) return;
    loading.value=true
    loginFormRef.value.validate(async(valid: boolean) => {
        if (valid) {
            // let ret=await doUserLogin(userLogin)
            let code =await uesrStore.fetchLoginAction(userLogin)
            // console.log(code);
            if(code ===0){
                ElMessage({
                    type:'success',
                    duration:2000,
                    message:h(
                        'div',null,h('span',{style:'color:#529b2e'},'【提示】:用户登录成功')
                    ),
                    onClose: ()=>{
                        loading.value=false
                        router.replace('/dashoard')
                    }

                })
            }
        } else {
            loading.value=false
            return false
        }
    })
}
</script>

<style lang="scss" scoped>
.admin_login {
    width: 450px;
    height: 480px;
    background-color: #006eff;
    /* display: flex;*/
    margin: 100px auto;
    color: aliceblue;

    >div {
        padding-top: 30px;
        text-align: center;
        h4 {
            padding-bottom: 20px !important;
        }
        .login_form {
            width: 380px;
            margin: 0 auto;

        }
    }

    .el-form-item {
        padding: 17px !important;
        width: 350px;
    }
}
</style>